/**
 * @name PeopleMarkers
 * @author darcrand
 * @desc 各种人员的描点
 */

import React from 'react'
import { Marker } from 'react-amap'
import './styles.scss'
import markerIco from '@/assets/icons/map-marker.svg'

const MarkerContent = ({ hash, name, handleClick }) => {
    return (
        <div classes="container">
            <div classes="logo" style={{ backgroundImage: `url("${markerIco}")` }} onClick={() => handleClick(hash)} />
            <div classes="tips">
                <div classes="tips-item">{name}</div>
            </div>
        </div>
    )
}

const PeopleMarkers = (show, list, onMarkerClick) => {
    return (
        show &&
        list.map(v => (
            <Marker key={v.hash} position={{ longitude: v.longitude, latitude: v.latitude }}>
                <MarkerContent {...v} handleClick={onMarkerClick} />
            </Marker>
        ))
    )
}

export default PeopleMarkers
